<!--
 * @Author: 追逐的娃 kangchao_php@163.com
 * @Date: 2024-10-08 09:19:06
 * @LastEditors: 追逐的娃 kangchao_php@163.com
 * @LastEditTime: 2024-10-08 17:53:19
 * @FilePath: \vue-project\src\components\HandleForm.vue
 * @Description: 
 * 
-->
<template>
  <a-drawer
    :width="drawerInfo.width ? drawerInfo.width : 340"
    :visible="visible"
    @ok="handleOk"
    @cancel="emit('closeDrawer'), handleReset()"
    unmountOnClose
  >
    <template #title> {{ drawerInfo.title }} </template>
    <ant-form ref="antFormRef" :formFields="formFields" :formConfig="formConfig" :rules="rules" />
  </a-drawer>
</template>

<script setup>
import { ref, watch } from 'vue'
import AntForm from './AntForm.vue'

const props = defineProps({
  drawerInfo: {
    type: Object,
    default: () => {}
  },
  formConfig: {
    type: Object,
    default: {
      width: '120',
      formType: 'vertical'
    }
  },
  formFields: {
    type: Array,
    default: () => []
  },
  rules: {
    type: Object,
    default: () => {}
  }
})

const visible = ref(false)
const antFormRef = ref(null)
const emit = defineEmits(['closeDrawer', 'submitDrawer'])

//点击提交
const handleOk = async () => {
  const validRes = await antFormRef.value.validateForm()
  if (validRes == undefined) {
    emit('submitDrawer', antFormRef.value.form)
    visible.value = false
  }
}

//重置表单
const handleReset = async () => {
  await antFormRef.value.resetForm()
}
watch(
  () => props.drawerInfo.visible,
  (val) => {
    visible.value = val
  },
  { immediate: true }
)
defineExpose({
  handleReset
})
</script>

<style lang="scss" scoped>
</style>
